<template>
  <div class="main-con mallProductClassify">
    <!-- 首页标题栏 -->
    <div class="main-title">
        商城商品分类
    </div>

    <!-- 按钮组 -->
    <div class="btn-group-con">
        <el-button size="mini" type="primary" @click="handleAdd">新建商品分类</el-button>
    </div>

    <!-- 表格数据 -->
    <div class="table-con" v-loading="loading">
      <el-table :data="tableData" size="mini" :header-cell-style="{background:'#f8f8f8'}" style="width: 100%">
        <el-table-column type="index" label="序号" width="50" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="categoryName" label="分类名称" width="" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="bindCount" label="商品数" width="" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="是否展示分类" width="" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                <el-switch v-model="scope.row.showOnClient" active-color="#13ce66" inactive-color="#ff4949" @change="handleShowClassify(scope.row)"></el-switch>
            </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="操作" width="" align="center">
          <template slot-scope="scope">
            <div class="handleBtn">
              <span @click="handleUpdate(scope.$index, scope.row)">编辑</span>
              <span @click="handleDelete(scope.$index, scope.row)">删除</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {
    queryMallProductClassifyInfo,
    deleteMallProductClassifyInfo
} from "@/common/service/productManagement/mallProductClassify.js";
export default {
    name: "mallProductClassify",
    data() {
        return {
            //表格数据
            tableData: [],//表格信息
            loading: false//表格加载动画
        };
    },
    created() {
        //初始化表格数据
        this._queryMallProductClassifyInfo();
    },
    methods: {
        /*----------------------------查询操作----------------------------*/
        //查询仓库信息表格数据
        _queryMallProductClassifyInfo() {
            this.loading = true;
            queryMallProductClassifyInfo(this.formData)
                .then(res => {
                    this.loading = false;
                    this.tableData = res;
                })
                .catch(err => {
                    this.loading = false;
                    this.$message.error(err.message);
                });
        },

        /*----------------------------添加操作----------------------------*/
        handleAdd(){
            this.$router.push({
                path: '/index/mallProductClassify/editMallProductClassify',
                query: {
                    editType: 'add',
                    editText: '新增'
                }
            });
        },

        /*----------------------------编辑操作----------------------------*/
        handleUpdate(index,row){
            this.$router.push({
                path: '/index/mallProductClassify/editMallProductClassify',
                query: {
                    editType: 'update',
                    editText: '编辑'
                }
            });
            localStorage.setItem("editData", JSON.stringify(row));
        },

        /*----------------------------删除操作----------------------------*/
        //点击删除
        handleDelete(index,row) {
            this.$confirm('您确定删除此商城商品分类信息吗？', '删除商城商品分类信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this._deleteMallProductClassifyInfo(row);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        //执行删除操作
        _deleteMallProductClassifyInfo(row){
            var data = {
                id: row.id
            }
            deleteMallProductClassifyInfo(data).then(res => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this._queryMallProductClassifyInfo();
            }).catch(err => {
                this.$message.error(err.message);
            })
        },

        /*----------------------------是否展示分类操作----------------------------*/
        handleShowClassify(){
            
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>